<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>诉求详情</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			/*其他*/
			.mui-bar-nav~.mui-content{padding:0;margin-top:.9rem;}
			.mui-slider-item{min-height:10rem;}
			.mui-sliders{z-index:1;width:100%;overflow:hidden;margin:0 auto;background:#fff;}
			.mui-sliders .mui-slider-groups{position: absolute; top:1.55rem;bottom: 0;width: 100%;height: auto;overflow:auto;background:#fff;}
			.mui-sliders .mui-slider-groups .mui-slider-item {position: relative;display: inline-block;width: 100%;
    height: 100%;vertical-align: top; white-space: normal;}
			/*切换菜单*/
			.mui-segmented-control{width:6rem;overflow:hidden;margin:0 auto;background:#f4f4f4;border-radius:.1rem;height:.82rem;line-height:.82rem;margin-bottom:.3rem;margin-top:.47rem;}
			.mui-segmented-control .mui-control-item{line-height:.82rem;font-size:.3rem;}
			.mui-segmented-control .mui-control-item{color:#666}
			.mui-segmented-control .mui-control-item.mui-active{background:#1653fc;color:#fff;border-radius:.1rem;}
			.mui-segmented-control .mui-control-item,.mui-segmented-control{border:none;}
			/*基本信息*/
			.basic_info{width:100%;float:left;padding:0;margin:0;}
			.basic_info>li{width:100%;min-height:.85rem;line-height:.85rem;border-bottom:1px solid #e5e5e5;}
			.basic_info>li>label{width:1.85rem;float:left;text-align:right;font-size:.26rem;color:#999;}
		    .basic_info>li>span{font-size:.26rem;color:#333;width:70%;float:left; margin-left: .1rem; word-break: break-all; line-height: 1; margin-top: .3rem;} 
		    /*材料信息*/
		    .datum_cont{width:100%;float:left;background:#f5f5f5;}
		    .datum_cont .datum_cont_list{padding:.25rem;box-sizing:border-box;width:100%;background:#fff;margin-bottom:.15rem;float:left;}
		    .datum_cont_list .datum_left{width:.85rem;text-align:center;float:left;font-size:.26rem;line-height:3.2;}
		    .datum_cont_list .datum_right{width:6rem;float:left;}
		    .datum_cont_list .datum_right .datum_title,.datum_info{width:100%;float:left;}
		    .datum_right .datum_title>.titles{line-height:.45rem;color:#333;font-size:.26rem;max-width:5.1rem;float:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
		    .datum_right .datum_title>.titles_type{color:#fff;font-size:.18rem;padding:0 .12rem;background:#f6782b;height:.32rem;line-height:.37rem;
		    float:left;border-radius:.06rem;margin-top:.02rem;}
		    .datum_info>span{font-size:.24rem;color:#777;float:left;max-width:45%;white-space:nowrap;float:left;margin-right:.25rem;line-height:.4rem;overflow:hidden;text-overflow:ellipsis;}
		    .datum_right .datum_title .blue_bg{background:#2bc9f6;}
		    /*意见列表*/
			.material_cont{width:7.5rem;overflow:hidden;margin:0;background:#f5f5f5;float:right;}
			.material_cont .material_list{width:100%;float:left;padding:.25rem 0 0 .15rem;background:#fff;margin-bottom:.15rem;}
			.material_cont .material_list .material_list_left{width:.46rem;float:left;margin-top:.2rem;}
			.material_cont .material_list .material_list_left>img{width:.42rem;height:.42rem;float:right;}
			.material_list_right{width:6.7rem;float:right;padding-bottom:.15rem;}
			.material_list_right>h6{width:100%;float:left;margin:0;}
			.material_list_right>h6 .titles{line-height:.55rem;font-size:.28rem;color:#333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:5.5rem;float:left;}
			.material_list_right>h6 .tit_icon{font-size:.26rem;color:#1653fc;float:left;line-height:.58rem;}
			.material_list_right>p{width:100%;float:left;line-height:.34rem;font-size:.26rem;color:#777;margin:0;}
		    .material_list_right>.lsit{width:100%;float:left;line-height:.74rem;height:.74rem;font-size:.26rem;color:#666;border-bottom:1px solid #f5f5f5;}	
			.material_list_right>.lsit .blue{color:#01b2e4;}
			.material_list_right>.lsit:last-child{border-bottom:none;}
			.none_arrow:after{content:""}
			.red{color:#ff0000;}
		   
		    .text_box{width: 100%;background: #fff;padding-left: 0.24rem;padding-top: 0.1rem;font-size:.26rem;}
			.text_box textarea{background: #eee;border: none;width: 6.07rem;height: 2.24rem;margin-top: 0.1rem;font-size:.26rem;}
			.text_box{position: relative;}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-sliders">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">
						诉求信息
					</a>
					<a class="mui-control-item" href="#item2">
						诉求附件
					</a>
					<a class="mui-control-item" href="#item3">
						回复信息
					</a>
				</div>
			<div class="mui-slider-groups" id="itemContents">
				<!--基本信息-->
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="">
						 <ul class="basic_info">
						 	<li>
						 		<label>标题</label>
						 		<span>{{sqInfoReg.title}}</span>
						 	</li>
						 	<li>
						 		<label>诉求编号</label>
						 		<span>{{sqInfoReg.sqCode}}</span>
						 	</li>
						 	<li>
						 		<label>查询码</label>
						 		<span>{{sqInfoReg.searchCode}}</span>
						 	</li>
						 	<li>
						 		<label>{{sqInfoReg.sqType}}时间</label>
						 		<span>{{sqInfoReg.regTime}}</span>
						 	</li>
						 	<li v-if="sqInfoReg.jcFlag">
						 		<label>纠错网址</label>
						 		<span>{{sqInfoReg.targetUrl}}</span>
						 	</li>
						 	<li>
						 		<label>回复状态</label>
						 		<span>{{sqInfoReg.replyStatus}} <template v-if="replyInfo_show"><a style="margin-left: 15px;" v-if="pj_show" id="pjym" :sqRegId="sqInfoReg.oid">评价</a></template></span>
						 	</li>
						 	<li style="border:none;">
						 		<label>诉求内容</label>
						 		<span v-html="sqInfoReg.content"></span>
						 	</li>				 	
						 </ul>
					</div>
				</div>
			    <!--诉求附件-->
			    <div id="item2" class="mui-control-content">
					<div id="scroll" class="">
						<div class="datum_cont" v-if="materials_show">
							<div class="datum_cont_list" v-for="material in materials">
								<div class="datum_right">
									<div class="datum_title">
										<span class="titles">{{material.name}}</span>
										<span class="titles_type" :materialId="material.oid" :name="material.extensionName">下载</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			    <!--回复信息-->
			    <div id="item3" class="mui-control-content">
					<div id="scroll" class="">
						<div class="material_cont" v-if="replyInfo_show">
							<div class="material_list" v-for="replyInfo in replyInfoList">
								<div class="material_list_left"><img src="../../images/work/fwdx-@2x.png"></div>
								<div class="material_list_right">
									<div class="text_box">
										<span>回复单位：</span><span>{{replyInfo.organName}}</span>
									</div>
									<div class="text_box">
										<span>回复内容：</span>
										<textarea  disabled="true">{{replyInfo.replyContent}}</textarea>	
									</div>
									<div v-if="replyInfo.evalFlag" class="text_box" style="margin-top: 0rem;" ><span>满意度：</span><span>{{replyInfo.pjTerm}}</span></div>
									<div v-if="replyInfo.evalFlag" class="text_box"><span>评价内容：</span><textarea name="" rows="" cols="" placeholder="请输入评价内容" disabled="true">{{replyInfo.evalContent}}</textarea></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			</div>
		</div>
	<script>
		function my_immersed(immersed) {}
	</script>
	<script src="../../js/immersed.js"></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/common.js"></script>
	<script type="text/javascript" src="../../js/app.js" ></script>
    <script src="../../js/vue.min.js"></script>
	<script type="text/javascript" src="../../js/file.js" ></script>
	<script>
			mui.plusReady(function() {
				var sqInfoRegId = utils.getUrlParam('oid');
				var sqCode = utils.getUrlParam('sqCode');
				var searchCode = utils.getUrlParam('searchCode');
				loadData(sqInfoRegId,sqCode,searchCode);
			});
			
			var itemContents = new Vue({
				el: '#itemContents',
				data: {
					sqInfoReg: {}, //办件基本数据
					materials: [], //材料列表信息
					replyInfoList: [], //回复信息
					materials_show:false,//列表是否有数据 false 表示无数据  true 表示有数据
					pj_show:false,//判断已回复的诉求是否已全部评价  已全部评价不显示  还有未评价的显示
					replyInfo_show:false
				}
			});
			
			/**
			 * 加载办件数据
			 * @param {Object} zwfwCaseId 办件主键
			 */
			function loadData(sqInfoRegId,sqCode,searchCode){
				utils.showWaiting();
				var url = 'appHttpService/viewSqInfoReg.do';
				utils.ajax(url, function(data) {
					data = JSON.parse(data);
					if(data.state == 0) {
						var sqInfoReg = data.sqInfoReg;
						var sqType = "";
						var jcFlag = false;
						if(sqInfoReg.sqType == 1){
							sqType = "咨询";
						}else if(sqInfoReg.sqType == 2){
							sqType = "投诉";
						}else if(sqInfoReg.sqType == 3){
							sqType = "建议";
						}else{
							sqType='纠错'
							jcFlag = true;	
						}
						var replyStatusVal = '未回复';
						if(sqInfoReg.replyStatus == '0' && sqInfoReg.auditFlag == '1'){
							replyStatusVal = '已回复';
						}
						itemContents.sqInfoReg = {
							oid:sqInfoReg.oid,
							title:sqInfoReg.title,
							sqType: sqType,
							jcFlag : jcFlag,
							sqCode: sqInfoReg.sqCode,
							targetUrl: sqInfoReg.targetUrl,
							searchCode: sqInfoReg.searchCode,
							content: sqInfoReg.content,
							replyStatus: replyStatusVal,
							regTime:utils.format(sqInfoReg.regTime,'yyyy-MM-dd HH:mm:ss')
					
						};
						
						//诉求附件
						if(undefined != data.attaList){
							var attaList = JSON.parse(data.attaList);						
							if(attaList != null){
								itemContents.materials_show = true;
								itemContents.materials = itemContents.materials.concat(convertMaterials(attaList));
							}						
							
						}
						
						if(sqInfoReg.replyStatus == '0' && sqInfoReg.auditFlag == '1'){
							//回复列表		
							var sqInfoReplyList = data.sqInfoReplyList;		
							if(sqInfoReplyList == null || sqInfoReplyList == undefined || sqInfoReplyList == ''){
								itemContents.replyInfo_show = false;
							}else{
								sqInfoReplyList = JSON.parse(data.sqInfoReplyList);		
								itemContents.replyInfo_show = true;
								var replyInfoLists = [];
								var index = 0;
								if(sqInfoReplyList != null ){//回复列表记录
									replyInfoLists = convertSqInfoReplyList(sqInfoReplyList,index);
								}							
								//将或得的意见列表数据添加到vue中
								itemContents.replyInfoList = itemContents.replyInfoList.concat(replyInfoLists);
							}
						}else{
							itemContents.replyInfo_show = false;
						}
						
					}else{
						mui.alert('未找到相关信息',null,null,function(){
							//mui.back();
						},'div')
					}
					closeWaitingAndShowView();
				}, jsonToParams({
					'sqInfoRegId':sqInfoRegId,
					'sqCode':sqCode,
					'searchCode':searchCode
				}));
			}
			
			/**
			 * 回复列表字段组装
			 * @param {Object} items 服务端返回列表数据
			 * @param {Object} index 单位回复标识  0没有  1有
			 */
			function convertSqInfoReplyList(items,index) {
				var isEvalFlag = false;//未评价
				var newItems = [];
				var index = 0;
				if(index == 1){
					index =index+1;
				}
				items.forEach(function(item) {
					    index++;
					    //已评价的诉求		
					   var pjTerm ="";
					   var evalContent = "";
					   if(item.sqInfoEval != undefined){				  		
						   	if(item.sqInfoEval.evalTarget == 1){
						   		pjTerm = "非常不满意";
						   	}else if(item.sqInfoEval.evalTarget  == 2){
						   		pjTerm = "不满意";
						   	}else if(item.sqInfoEval.evalTarget  == 3){
						   		pjTerm = "基本满意";
						   	}else if(item.sqInfoEval.evalTarget  == 4){
						   		pjTerm = "满意";
						   	}else if(item.sqInfoEval.evalTarget  == 5){
						   		pjTerm = "非常满意";
						   	}
						    evalContent = item.sqInfoEval.evalContent;
						   	
					   }
					   
					   	var evalFlag = false;
					   	if(item.sqEvalId == undefined || item.sqEvalId == null || item.sqEvalId == '' || item.sqEvalId.trim() == '' ){
					   	  isEvalFlag = true;
					   	}else{
					   	  evalFlag = true;
					    }
					   	
						newItems.push({
							xh: index,
							replyContent: item.replyContent,
							pjTerm:pjTerm,
							evalContent:evalContent,
							evalFlag : evalFlag,
							organName: item.sysOrgan.name
						});
				});
				
				if(isEvalFlag){
					itemContents.pj_show = true;
				}
				return newItems;
			}
			
			/**
			 * 材料信息字段组装
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * @param {Object} items 将服务端返回数据，转换成前端需要的格式
			 */
			function convertMaterials(items) {
				var newItems = [];
				items.forEach(function(item) {		
					newItems.push({
						oid:item.oid,
						name:item.name,
						extensionName:item.extensionName
					});
			     });
			   return newItems;
	      }		
	      
	      /**
	       * 诉求附件下载
	       */
	     mui('.mui-control-content').on('tap','[materialId]',function(){
	     	var materialId = this.getAttribute('materialId');
			var fileType = this.getAttribute('name');
			//console.log(filename);
			//var url = utils.HOST + 'upload/upload/all/20170704/test.rar';
			var url = utils.HOST + 'appHttpService/appDownLoadFile.do?materialOid=' + materialId;
			
			//开始下载
			showOrDown(url,materialId,null,fileType,function(path){
				openDir(path);
			})
			
	     });
	     
	     //评价诉求信息页面
	     mui('.basic_info').on('tap','a',function(){
	     	var oid = this.getAttribute('sqRegId');
		 	showTemplates('../my/my_sq_evaluate.html','诉求评价','../my/my_sq_evaluate.html?oid='+oid);
	     });
	     
		</script>
	</body>
</html>
